最近，資料視覺化已經不單單是把圖表畫出來，常常會被要求要能夠更吸睛，最好還要好玩，所以互動性就變成了重要的一環。

on

在d3中要監聽滑鼠、鍵盤、觸控等等事件，可以使用on來達成目標

.on(DOM名稱,function)
先指定要監聽的DOM名稱，再利用匿名函式來定義事件發生後要做的事情，同樣也可以使用動畫來做一些變化

.on("mouseover",function(){
    d3.select(this)
        .transition()
        .duration(500)
        .attrTween("fill", function(d) {
          return d3.interpolateRgb(colorlinear(d),'steelblue');
        });
})
.on("mouseout",function(d){
    d3.select(this)
        .transition()
        .duration(500)
        .attrTween("fill", function(d) {
          return d3.interpolateRgb('steelblue',colorlinear(d));
        });
})

除了使用匿名函式之外，也可以像之前定義比例尺一樣在外部定義方程式後，再呼叫自訂的函式來使用

function over(){
	d3.select(this)
		.transition()
		.duration(500)
		.attrTween("fill", function(d) {
		  return d3.interpolateRgb(colorlinear(d),'steelblue');
		});
}

function out(){
	d3.select(this)
		.transition()
		.duration(500)
		.attrTween("fill", function(d) {
		  return d3.interpolateRgb('steelblue',colorlinear(d));
		});
}

定義好之後直接呼叫使用

.on("mouseover",over)
.on("mouseout",out)

這樣的好處就是可以重複使用，方便修改

Demo & code : https://codepen.io/FanWay/pen/VydEzM